<template>
  <div class="container">
    <topTitle
      :titleText="titleText"
      :back="back"
      @gobackTriser="goBack"
    ></topTitle>
    <detailHeader
      :status="auditStatus === 0 ? 1 : auditStatus === 1 ? 2 : 3"
      :infoList="infoList"
    ></detailHeader>
    <div class="mainCon">
      <div class="employeeInfoBox">
        <div class="secondaryTitle secondaryTitleTheme">提报信息</div>
        <el-row>
          <el-col :span="16">
            <el-row class="detailInfoItemSty">
              <el-col :span="12" class="labelWidthSty">
                <span class="gridContent color333 fontSizeF fontWeight"
                  >姓名：</span
                >
                <span class="gridContent empContentSty color666 fontSizeF">{{
                  employeeInfo.name || '--'
                }}</span>
              </el-col>
              <el-col :span="12" class="labelWidthSty">
                <span class="gridContent color333 fontSizeF fontWeight"
                  >身份证号：</span
                >
                <span class="gridContent empContentSty color666 fontSizeF">{{
                  employeeInfo.idcard || '--'
                }}</span>
              </el-col>
            </el-row>
            <el-row class="detailInfoItemSty">
              <el-col :span="12" class="labelWidthSty">
                <span class="gridContent color333 fontSizeF fontWeight"
                  >证书编号：</span
                >
                <span class="gridContent empContentSty color666 fontSizeF">{{
                  employeeInfo.certificateNumber || '--'
                }}</span>
              </el-col>
              <el-col :span="12" class="labelWidthSty">
                <span class="gridContent color333 fontSizeF fontWeight"
                  >发证日期：</span
                >
                <span class="gridContent empContentSty color666 fontSizeF">{{
                  employeeInfo.effectiveStartDate || '--'
                }}</span>
              </el-col>
            </el-row>
          </el-col>
          <el-col :span="6" style="text-align: center" class="readIdCardBox">
            <img
              :src="employeeInfo.imgPath ? employeeInfo.imgPath : errorPath"
              style="width: 100px"
            />
          </el-col>
        </el-row>
      </div>
      <div class="spacing"></div>
      <div class="applyInfoBox">
        <div class="secondaryTitle secondaryTitleTheme">附件资料</div>
        <el-row class="detailInfoItemSty">
          <el-col :span="10" class="labelWidthSty">
            <span
              class="gridContent color333 fontSizeF fontWeight"
              style="line-height: 19px"
              >证书附件：</span
            >
            <span class="gridContent empContentSty color666 fontSizeF">
              <span v-if="employeeInfo.attachmentFiles.length > 0">
                <span>已上传</span>
                <el-link class="seeFile" @click="toUploadLaborFile()"
                  >查看</el-link
                >
                <contractEnclosureDialog
                  v-if="uploadLaborFile"
                  dialogTitle="证书附件"
                  :tableData="employeeInfo.attachmentFiles"
                  @closeDialog="hiddenLaborDialog"
                ></contractEnclosureDialog>
              </span>
              <span v-else>未上传</span>
            </span>
          </el-col>
        </el-row>
        <el-row class="detailInfoItemSty">
          <el-col :span="10" class="labelWidthSty">
            <span
              class="gridContent color333 fontSizeF fontWeight"
              style="line-height: 19px"
              >任命书：</span
            >
            <span class="gridContent empContentSty color666 fontSizeF">
              <span v-if="employeeInfo.empAppointFiles.length > 0">
                <span>已上传</span>
                <el-link class="seeFile" @click="toEmpAppointFile()"
                  >查看</el-link
                >
                <contractEnclosureDialog
                  v-if="empAppointFile"
                  dialogTitle="证书附件"
                  :tableData="employeeInfo.empAppointFiles"
                  @closeDialog="hiddenEmpAppointDialog"
                ></contractEnclosureDialog>
              </span>
              <span v-else>未上传</span>
            </span>
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>

<script>
import detailHeader from '@/components/publicCom/detailHeader.vue'
export default {
  name: 'laborAuditDetailCz',
  data() {
    return {
      titleText: '劳资专员资质审核',
      errorPath: require('../../../static/img/employee/card.png'),
      canSubmit: false, //是否可以提交
      id: '', //列表id
      back: true,
      auditStatus: '',
      employeeInfo: {
        files: [],
      },
      uploadLaborFile: false, //劳资证书附件
      path: '',
      empAppointFile: false, //任命书附件
    }
  },
  components: { detailHeader },
  created() {
    this.id = this.$route.query.id
    this.path = this.$route.query.path
    //获取企业详情
    this.getCompanyDetail()
  },
  computed: {
    infoList() {
      if (this.auditStatus == 2) {
        return [
          { title: '审核人', value: this.employeeInfo.auditorName },
          { title: '审核时间', value: this.employeeInfo.auditTime },
          { title: '不通过原因', value: this.employeeInfo.rejectReason },
        ]
      } else if (this.auditStatus == 1) {
        return [
          { title: '审核人', value: this.employeeInfo.auditorName },
          { title: '审核时间', value: this.employeeInfo.auditTime },
        ]
      }
    },
  },
  methods: {
    getCompanyDetail() {
      this.axios({
        method: 'post',
        url: 'api-e/cs/qualification/expand/detail',
        data: {
          id: this.id,
        },
      })
        .then((res) => {
          if (!res.data.hasError) {
            this.employeeInfo = res.data.result
            this.auditStatus = this.employeeInfo.auditStatus
          } else {
            this.$message({
              showClose: true,
              message: '加载审核信息失败',
              type: 'error',
            })
          }
        })
        .catch((error) => {
          this.$message.error('数据获取失败')
        })
    },
    //页面返回
    goBack() {
      if (this.path == 'laborInfoCz') {
        //滁州项目劳资信息(项目)
        this.$router.push('/home/employee/laborInfoCz')
        this.$store.commit('GOBACK_NAME', {
          oldUrl: '/home/employee/laborInfoCz',
          newUrl: this.$router.currentRoute.fullPath,
        })
      } else {
        //滁州劳资资质审核(监察),因审核跳详情，返回列表不能缓存
        this.$router.push('/home/employee/laborInfoAuditCz')
        this.$store.commit('CHANGE_SLIDER_NAME', {
          oldUrl: '/home/employee/laborInfoAuditCz',
          newUrl: this.$router.currentRoute.fullPath,
        })
      }
    },
    toUploadLaborFile() {
      this.uploadLaborFile = true
    },
    hiddenLaborDialog() {
      this.uploadLaborFile = false
    },
    // 任命书查看
    toEmpAppointFile() {
      this.empAppointFile = true
    },
    hiddenEmpAppointDialog() {
      this.empAppointFile = false
    },
  },
}
</script>

<style scoped lang="less">
.mainCon {
  padding: 0;
  .itemTitle {
    font-size: 18px;
    border-bottom: 1px solid #dee5f4;
    line-height: 50px;
  }
  .checkResultBox {
    margin-bottom: 20px;
    padding: 24px;
    background: #f5f7fa;
    i {
      vertical-align: middle;
      font-size: 36px;
    }
    .resultInfo {
      display: inline-block;
      margin-left: 15px;
      .resultTop {
        color: #333;
        font-size: 18px;
        font-weight: bold;
        margin-bottom: 8px;
      }
      .resultBottom {
        color: #666;
        span {
          margin-right: 20px;
          font-size: 14px;
        }
      }
    }
    .employeeInfo {
      margin-top: 40px;
    }
  }
  .employeeInfoBox,
  .applyInfoBox {
    padding: 20px 24px;
    .itemInfo {
      padding-top: 20px;
      font-size: 14px;
      padding-left: 14px;
      .grid-group {
        min-height: 36px;
        margin-bottom: 6px;
      }
      .labelWidth {
        display: inline-block;
        color: #333;
      }
      .information {
        color: #666;
      }
    }
  }
  .applyInfoBox {
    .yellow {
      color: #f9a243;
    }
  }
  .btnBox {
    margin-top: 20px;
    text-align: center;
  }
}
</style>
